<template>
	<view class="collection">
		<view class="tip font14 color999">长按拖动顺序（共{{list.length}}个）</view>
		<view class="heightScroll" v-if="type=='school'">
			<HM-dragSorts ref="dragSorts" :list="list" :colType="type" :listHeight="listHeight" :longTouch="false" :feedbackGenerator="true" :rowHeight="44"
				@onclick="onclick" @change="change" @confirm="confirm" @cancelSuccess="cancelSuccess"></HM-dragSorts>
		</view>
		<view class="heightScroll" v-if="type=='major'">
			<HM-dragSorts ref="dragSorts" :list="list" :colType="type" :listHeight="listHeight" :longTouch="false" :feedbackGenerator="true" :rowHeight="44"
				@onclick="onclick" @change="change" @confirm="confirm" @cancelSuccess="cancelSuccess"></HM-dragSorts>
		</view>
	</view>
</template>

<script>
	import { getMyCollection,cancelCollection,collectionSort } from "@/api/collection.js"
	export default {
		data() {
			return {
				list:[],
				listHeight:0,
				type:''
			}
		},
		onLoad(option) {
			console.log('option==',option)
			this.type=option.type
			this.getList();
		},
		onShow() {
			this.$nextTick(()=>{
				this.accountHeight()
				console.log('缓存',uni.getStorageSync('systemInfo'))
			})
			
		},
		onReady() {
			uni.setNavigationBarTitle({
				title:`收藏${this.type=='school'?'学校':'专业'}`
			})
		},
		methods: {
			// 计算收藏列表高度
			accountHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.tip').boundingClientRect(data => {
				  // console.log("得到布局位置信息" ,data);
				  // console.log("节点离页面顶部的距离为" + data.top);
				  // 44是导航栏的高度
				  this.listHeight=uni.getStorageSync('systemInfo').screenHeight-data.height-uni.getStorageSync('systemInfo').statusBarHeight-44
				  // console.error("计算的高度",uni.getStorageSync('systemInfo').screenHeight,data.height,uni.getStorageSync('systemInfo').statusBarHeight)
				}).exec();
			},
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				// 1校友圈  2专业圈
				getMyCollection({circleType:this.type=='school'?1:2}).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						console.log('收藏',res)
						this.list=res.data
					}
				}).catch((err)=>{
					uni.hideLoading()
				})
			},
			onclick(e) {
				console.log('=== onclick start ===');
				console.log('被点击行: ', JSON.stringify(e));
				console.log('=== onclick end ===');
			},
			change(e) {
				console.log('=== change start ===');
				console.log('被拖拽行: ', JSON.stringify(e.moveRow));
				console.log('原始下标: ', e.index);
				console.log('被拖拽到: ', e.moveTo);
				console.log('=== change end ===');
			},
			confirm(e) {
				console.log('=== confirm start ===');
				console.log('被拖拽行: ', JSON.stringify(e.moveRow));
				console.log('原始下标: ', e.index);
				console.log('被拖拽到: ', e.moveTo);
				console.log('排序后的list: ', e.list);
				// 如果需要删除列表行，必须要排序后，同步一下排序后的list到页面list
				// 因为排序后页面的list和组件内的list已经不一样，不同步list，直接删除页面的list中项目，达不到实际效果。
				let sortList=e.list
				let sortListIds=[]
				sortList.forEach((item)=>{
					sortListIds.push(item.id)
				})
				console.log('=== confirm end ===',sortListIds);
				collectionSort(sortListIds).then((res)=>{
					if(res.code==100000){
						console.error("数据",res)
					}
				})
			},
			// 取消收藏
			cancelSuccess(item,idx){
				console.log('取消收藏',item,idx)
				uni.showModal({
					title: '提示',
					content: `确定取消对该${this.type=='school'?'校':'专业'}的收藏吗？`,
					success:(res)=> {
						if (res.confirm) {
							let param={
								id:item.id
							}
							cancelCollection(param).then((res)=>{
								if(res.code==100000){
									this.$refs.dragSorts.splice(idx,1);
									console.log('删除后的数据',this.list)
								}
							})
						} else if (res.cancel) {}
					}
				});
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";
page{
	background: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.collection{
	.tip{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
}
</style>
